<template>
  <!-- 对话框 -->
  <f7-page>
    <f7-navbar title="对话框" back-link="返回" no-hairline no-shadow></f7-navbar>

    <f7-row class="margin">
      <f7-col tag="p">
        <f7-button fill raised @click="openDialog">Dialog</f7-button>
      </f7-col>
      <f7-col tag="p">
        <f7-button fill raised @click="loading">Loading Dialog</f7-button>
      </f7-col>
    </f7-row>
    <f7-row class="margin">
      <f7-col>
        <f7-button fill raised @click="alert">Alert</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill raised @click="confirm">Confirm</f7-button>
      </f7-col>
    </f7-row>
    <f7-row class="margin">
      <f7-col tag="p">
        <f7-button fill raised @click="load">Loading</f7-button>
      </f7-col>
      <f7-col tag="p">
        <f7-button fill raised @click="toast">Toast</f7-button>
      </f7-col>
    </f7-row>
  </f7-page>
</template>

<script>
export default {
  name: 'Dialog',
  methods: {
    openDialog() {
      let _this = this;
      this.$ui.dialog({
        title: '提示',
        text: '欢迎使用Framework7',
        buttons: [
          {
            text: '取消',
          },
          {
            text: '确定',
          }
        ],
        onClick(dialog, index) {
          if (index === 0) {
            _this.$ui.alert('你点击了取消', '提示');
          } else {
            _this.$ui.alert('你点击了确定', '提示');
          }
        }
      });
    },
    loading() {
      this.$ui.loading.create('加载中...');
      setTimeout(() => {
        this.$ui.loading.close();
      }, 1500);
    },
    load() {
      this.$ui.loading.create();
      setTimeout(() => {
        this.$ui.loading.close();
      }, 1500);
    },
    toast() {
      this.$ui.toast('F7极致的原生体验');
    },
    alert() {
      this.$ui.alert('这是Alert内容', '提示标题', () => {
        this.$ui.toast('这是回调函数');
      });
    },
    confirm() {
      this.$f7.dialog.confirm('这是Confirm内容', '标题', () => {
        this.$ui.toast('这是回调函数');
        this.$f7router.navigate('/tabs/');
      })
    }
  }
}
</script>